﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
  <!-- 
   <script src="./js/echarts.js"></script>
-->
	<script src="../js/jquery-1.4.3.js"></script>
    <script src="../Echarts3/js/echarts.min.js"></script>

</head>

<body>
    <div id="main" class="main" style="height:300px;border:1px solid #ccc;padding:10px;"></div>
  
   <div id="main2" class="main" style="height:300px;border:1px solid #ccc;padding:10px;"></div>
    <div id="main3" class="main" style="height:300px;border:1px solid #ccc;padding:10px;"></div>

    <script type="text/javascript">
			var obj = {};
	 		var myChart;
	 		function creatChart(a){
	 			var myChart = echarts.init(document.getElementById(a));
           
            	var option = {
            		"title": {
	              "text": "受欢迎国家电影TOP10_option",
	              "x": "center"
	            },
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:['蒸发量','降水量']
                },
                toolbox: {
                    show : false,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                    }
                ],
                // max 为 dataMax， 设置min。min大于最小值.（echart2无效。echart3小于设置值将向相反方向延伸）
                // min 为 dataMin ，设置max,自动对max取整
                // 当min : 'dataMin',max : 'dataMax'。
//              		echarts2:最小值为向下取整，最大值max向上取整，（y轴分成4到6份）。
//						echarts3:min取最小值，max取最大值。
               // 当min : 设固定值,max : 设固定值。将 限制y轴根据维度变化值。
              
              yAxis : [
                    {
                        type : 'value',
                        splitArea : {show : true},
                         max : 300,
                        min : 100
                       
// 						min : 50,
// 						max : 10
                    }
                ],
                series : [
                    {
                        name:'蒸发量',
                        type:'bar',
                        data:[200, 40, 70, 200, 250, 70, 135, 162, 30, 200, 164, 330]
                    },
                    {
                        name:'降水量',
                        type:'bar',
                        data:[2.6, 5.9, 9.0, 6.4, 8.7, 5.7, 5.6, 2.2, 8.7, 8.8, 6.0, 2.3]
                    }
                ]
            };
            
            var option2 = {
            "id": "138",
            "title": {
              "text": "受欢迎国家电影TOP10_option2",
              "x": "center"
            },
            "tooltip": {
              "show": true,
              "trigger": "item",
              "formatter": "{a} <br/>{b} : {c} ({d}%)"
            },
            "legend": {
              "show": true,
              "orient": "vertical",
              "x": "left",
              "y": 36,
              "data": [
                "美国",
                "中国大陆",
                "日本",
                "香港",
                "英国",
                "法国",
                "德国",
                "韩国",
                "台湾",
                "加拿大"
              ]
            },
            "toolbox": {
              "show": false,
              "feature": {
                "mark": {
                  "show": false
                },
                "dataView": {
                  "show": false,
                  "readOnly": false
                },
                "magicType": {
                  "show": false,
                  "type": [
                    "pie",
                    "funnel"
                  ],
                  "option": {
                    "funnel": {
                      "x": "25%",
                      "width": "50%",
                      "funnelAlign": "left",
                      "max": 1548
                    }
                  }
                },
                "restore": {
                  "show": false
                },
                "saveAsImage": {
                  "show": true
                }
              }
            },
            "calculable": false,
            "series": [
              {
                "type": "pie",
                "radius": [
                  "50%",
                  "75%"
                ],
                "center": [
                  "65%",
                  "55%"
                ],
                "itemStyle": {
                  "normal": {
                    "label": {
                      "show": false
                    },
                    "labelLine": {
                      "show": false
                    }
                  }
                },
                "data": [
                  {
                    "name": "美国",
                    "value": 95035420
                  },
                  {
                    "name": "中国大陆",
                    "value": 39132140
                  },
                  {
                    "name": "日本",
                    "value": 31822921
                  },
                  {
                    "name": "香港",
                    "value": 28611997
                  },
                  {
                    "name": "英国",
                    "value": 22177934
                  },
                  {
                    "name": "法国",
                    "value": 12746242
                  },
                  {
                    "name": "德国",
                    "value": 8932431
                  },
                  {
                    "name": "韩国",
                    "value": 8483401
                  },
                  {
                    "name": "台湾",
                    "value": 6587779
                  },
                  {
                    "name": "加拿大",
                    "value": 5948997
                  }
                ]
              }
            ],
            "noDataLoadingOption": {
              "text": "暂无数据",
              "effect": "bubble",
              "effectOption": {
                "backgroundColor": "#fff",
                "effect": {
                  "n": 0
                }
              },
              "textStyle": {
                "fontSize": 20
              }
            }
          };
          		if ("main" == a) {
          			myChart.setOption(option);
          		}else if ("main2" == a) {
          			myChart.setOption(option2);
          		}else{
          			myChart.setOption(option3);
          		}
            	 obj[a] = myChart;
//				  window.onresize = myChart.resize();
	 		}
	 		var option3 =   {
            "id": "139",
            "title": {
              "text": "受欢迎国家电影TOP10_option3",
              "x": "center"
            },
            "tooltip": {
              "show": true,
              "trigger": "item",
              "formatter": "{a} <br/>{b} : {c} ({d}%)"
            },
            "legend": {
              "show": true,
              "orient": "vertical",
              "x": "left",
              "y": 36,
              "data": [
                "美国",
                "中国大陆",
                "日本",
                "香港",
                "英国",
                "法国",
                "德国",
                "韩国",
                "台湾",
                "加拿大"
              ]
            },
            "toolbox": {
              "show": false,
              "feature": {
                "mark": {
                  "show": false
                },
                "dataView": {
                  "show": false,
                  "readOnly": false
                },
                "magicType": {
                  "show": false,
                  "type": [
                    "pie",
                    "funnel"
                  ],
                  "option": {
                    "funnel": {
                      "x": "25%",
                      "width": "50%",
                      "funnelAlign": "left",
                      "max": 1548
                    }
                  }
                },
                "restore": {
                  "show": false
                },
                "saveAsImage": {
                  "show": true
                }
              }
            },
            "calculable": false,
            "series": [
              {
                "type": "pie",
                "radius": [
                  "50%",
                  "75%"
                ],
                "center": [
                  "65%",
                  "55%"
                ],
                "itemStyle": {
                  "normal": {
                    "label": {
                      "show": false
                    },
                    "labelLine": {
                      "show": false
                    }
                  }
                },
                "data": [
                  {
                    "name": "美国",
                    "value": 95035420
                  },
                  {
                    "name": "中国大陆",
                    "value": 39132140
                  },
                  {
                    "name": "日本",
                    "value": 31822921
                  },
                  {
                    "name": "香港",
                    "value": 28611997
                  },
                  {
                    "name": "英国",
                    "value": 22177934
                  },
                  {
                    "name": "法国",
                    "value": 12746242
                  },
                  {
                    "name": "德国",
                    "value": 8932431
                  },
                  {
                    "name": "韩国",
                    "value": 8483401
                  },
                  {
                    "name": "台湾",
                    "value": 6587779
                  },
                  {
                    "name": "加拿大",
                    "value": 5948997
                  }
                ]
              }
            ],
            "noDataLoadingOption": {
              "text": "暂无数据",
              "effect": "bubble",
              "effectOption": {
                "backgroundColor": "#fff",
                "effect": {
                  "n": 0
                }
              },
              "textStyle": {
                "fontSize": 20
              }
            }
          };
            
            
            $(".main").each(function(){
            	var id = $(this).attr("id");
            	creatChart(id);
            })
	
    		 
    		
         $(window).resize(function(){

//			for(o in obj){
//				obj[o].resize();
//			}
	
//			$("body div").remove();
//			var d = '<div id="main2" style="height:300px;border:1px solid #ccc;padding:10px;"></div>';
//			$("body").prepend(d)
//			creatChart("main2");

         	 $(".main").each(function(){
            	var id = $(this).attr("id");
            	console.log(id)
            	creatChart(id);
            	
            });
				
//          	creatChart("main");
//          	creatChart("main2");
//          	creatChart("main3");
		});
    </script>
</body>
</html>